import React, {Component} from 'react';
import {StyleSheet, Image, Text, View} from 'react-native';
import {Flex, WhiteSpace} from '@ant-design/react-native';
import moment from 'moment';

class HCard extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View
                style={{
                    width: '100%',
                    borderRadius: 9,
                    backgroundColor: 'white',
                }}>
                <View style={{width: '100%', height: 118, borderRadius: 10, backgroundColor: '#d3d3d3'}}>
                    <Image
                        style={styles.headerImage}
                        source={{uri: this.props.baseurl + '/Building/' + this.props.item.CompanyBuildingID + '/2/' + this.props.item.imgFileName}}
                    />
                    {this.props.item.PlanName != '' && (
                        <Text
                            numberOfLines={1}
                            style={{
                                position: 'absolute',
                                left: 0,
                                top: 0,
                                backgroundColor: '#d61616',
                                width: '100%',
                                padding: 5,
                                borderTopLeftRadius: 10,
                                borderTopRightRadius: 10,
                                color: '#ffffff',
                                fontWeight: '600',
                            }}>
                            {this.props.item.PlanName}
                        </Text>
                    )}
                </View>
                <Flex
                    style={{
                        color: 'white',
                        marginTop: -20,
                        marginLeft: '5%',
                        marginRight: '5%',
                        alignSelf: 'flex-start',
                        height: 16,
                        backgroundColor: '#838280',
                        borderRadius: 10,
                        marginBottom: 5,
                    }}>
                    <Image style={{width: 9, height: 9, marginLeft: '3%'}} source={require('~/assets/public/dingwei.png')} />
                    <Text style={{color: 'white', marginRight: '3%', fontSize: 9}}>
                        {this.props.item.CityName.substring(this.props.item.CityName.lastIndexOf('/') + 1, this.props.item.CityName.length)}
                    </Text>
                </Flex>
                <View
                    style={{
                        width: '100%',
                        paddingLeft: 10,
                        paddingRight: 10,
                        paddingBottom: 10,
                    }}>
                    <Flex justify={'between'} style={styles.infoHead}>
                        <Text numberOfLines={1} style={styles.infoTitle}>
                            {this.props.item.BuildingName}
                        </Text>
                        <View style={{width: '20%'}}>
                            {this.props.item.PlanDate != null ? (
                                <Image style={{width: '100%', resizeMode: 'contain'}} source={require('~/assets/public/huodongzhong.png')} />
                            ) : (
                                <Image style={{width: '100%', resizeMode: 'contain'}} source={require('~/assets/public/cuxiao.png')} />
                            )}
                        </View>
                    </Flex>
                    <Flex justify={'between'} style={styles.infoHead}>
                        <Text style={styles.infoParams}>活动车位数 {this.props.item.ParkingCount}</Text>
                        <Text style={styles.infoParams}>|</Text>
                        <Text style={styles.infoParams}>车位配比1:{this.props.item.ParkingRate}</Text>
                    </Flex>
                    <Flex style={styles.infoHead}>
                        <Text numberOfLines={1}>
                            <Text style={{fontSize: 10, color: '#CE2D32'}}>
                                售价
                                <Text style={{fontSize: 14, color: '#ce2d32'}}>
                                    {(this.props.item.PriceSellMin / 10000).toFixed(1)}-{(this.props.item.PriceSellMax / 10000).toFixed(1)}
                                </Text>
                                万
                            </Text>
                        </Text>
                    </Flex>
                    {this.props.item.PlanDate != null && (
                        <Flex style={styles.time}>
                            <View>
                                <Image style={{width: 43, height: 13}} source={require('~/assets/public/time.png')} />
                            </View>
                            <Text style={styles.infoTime}>
                                {this.props.item.PlanDate.split(',')[0].substring(0, 10)}-{this.props.item.PlanDate.split(',')[1].substring(5, 10)}
                            </Text>
                        </Flex>
                    )}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    mainView: {
        width: '100%',
        borderRadius: 9,
        backgroundColor: 'white',
    },
    headerImage: {
        //width: '100%',
        height: 118,
        resizeMode: 'stretch',
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
    },
    infoView: {
        width: '100%',
        height: 'auto',
        paddingHorizontal: 5,
    },
    infoHead: {
        paddingRight: 3,
        height: 13.5,
        width: '100%',
        marginTop: 8,
    },
    infoTitle: {
        fontSize: 14,
        color: '#080103',
        width: '80%',
    },

    infoTagText: {
        fontSize: 12,
        backgroundColor: 'transparent',
        color: 'white',
    },
    infoParams: {
        fontSize: 10,
        color: '#9c9a9d',
        textAlign: 'center',
    },
    time: {
        height: 14,
        width: '100%',
        marginTop: 8,
    },
    infoTime: {
        paddingLeft: 5,
        fontSize: 9,
        color: '#B59C7B',
    },
});

export default HCard;
